import React from 'react';
import {
  View,
  Text,
  ImageBackground,
  Pressable,
  Image,
  StyleSheet,
} from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
const styles = StyleSheet.create({
  button: {
    color: '#fff',
    height: 30,
    width: 80,
    padding: 8,
    backgroundColor: '#666',
    textAlign: 'center',
    borderRadius: 19,
    overflow: 'hidden',
  },
});
const Header = ({backgroundUrl, avatarUrl, nickname, follows, followeds}) => {
  const getAlbum = () => {
    async function get() {
      let res = await CameraRoll.getAlbums({assetType: 'Photos'});
      console.log(res);
    }
    get();
  };
  return (
    <ImageBackground style={{height: 300}} source={{uri: backgroundUrl}}>
      <View style={{flex: 1, padding: 15, top: -50}}>
        <View style={{flex: 2}}>
          <Pressable
            style={{
              // flex: 1,
              // width: '23%',
              width: 100,
              borderRadius: 50,
              overflow: 'hidden',
              marginTop: 50,
            }}>
            <Image
              source={{uri: avatarUrl}}
              style={{width: 100, height: 100}}
            />
          </Pressable>
        </View>
        <View style={{flex: 1, justifyContent: 'space-around'}}>
          <Text style={{fontSize: 16, color: '#fff'}}>{nickname}</Text>
          <View style={{flexDirection: 'row'}}>
            <Text style={{fontSize: 12, color: '#999', marginRight: 15}}>
              关注 {follows}
            </Text>
            <Text style={{fontSize: 12, color: '#999'}}>粉丝{followeds}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
            <View
              style={{
                padding: 4,
                borderRadius: 12,
                height: 20,
                width: 40,
                backgroundColor: '#666',
              }}>
              <Text
                style={{
                  fontWeight: '800',
                  fontSize: 12,
                  color: '#fff',
                  textAlign: 'center',
                  fontStyle: 'italic',
                }}>
                LV7
              </Text>
            </View>
            <View style={{flexDirection: 'row'}}>
              <Text style={{...styles.button, marginRight: 10}}>编辑</Text>
              <Text style={{...styles.button}} onPress={() => getAlbum()}>
                更换背景
              </Text>
            </View>
          </View>
        </View>
      </View>
    </ImageBackground>
  );
};

export default Header;
